<template>
    <div class="user">
      <slot />
    </div>
  </template>
  <script setup lang='ts'>
  import { ref,reactive} from 'vue'
  </script>
  <style scoped lang='scss'>
    // 在 User 组件中样式中，让.userInfo 类的颜色为红色，效果并没有生效，这里因为作用域样式不会影响到 <slot/> 渲染出来的内容。
    // .user .userInfo{
    //     color: red;
    // }

    // 要想改变插槽的内容，可以使用 :slotted  伪类
    // :slotted(.userInfo){
    //     color: red;
    // }

    // 如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现 
    :global(.red){
      color: red;
    }
  </style>